<template>
  <div class="ind-cascader-condition">
    <el-input
      placeholder="请输入关键字进行搜索"
      v-model="keywords"
      size="small"
      prefix-icon="el-icon-search"
      class="input-with-select"
      clearable
      maxlength="50"
      @click.native="showPopover"
      @change="onInputChange">
      <el-select
        v-if="showBonus"
        slot="prepend"
        v-model="selectedBonusVal"
        class="type-filter"
        placeholder="推送类别"
        size="small"
        clearable
        @change="onBonusChange"
        style="width: 86px">
        <el-option v-for="(label, key) in bonus" :key="key" :label="label" :value="key"></el-option>
      </el-select>
    </el-input>
    <el-popover v-model="popoverVisible" placement="bottom-start" trigger="manual">
      <el-cascader-panel
        v-if="levels.length"
        v-model="pName"
        :options="levels"
        :props="{ checkStrictly: true, emitPath: false }"
        size="small"
        @change="onPnameChange"
        @expand-change="onExpandChange"></el-cascader-panel>
      <div class="popover-trigger" slot="reference"></div>
    </el-popover>
  </div>
</template>

<script>
import { getIndicationLevels } from '@api/modules/indication'
import { convertLevelData } from '@controller/indication'
import { IND_TYPE } from '@utility/dict'

export default {
  name: 'IndCascader',
  components: {},
  model: {
    prop: 'val',
    event: 'changeValue',
  },
  props: {
    val: { type: String },
    busId: { type: [Number, String] },
    indType: { type: String, default: IND_TYPE.lznl },
    showBonus: { type: Boolean },
  },
  data() {
    return {
      keywords: '',
      pName: '',
      levels: [],
      selectedBonusVal: '',
      bonus: {
        0: '必填项',
        1: '加分项',
      },
      popoverVisible: false,
      popoverWidth: 200,
      hideTimer: null,
    }
  },
  computed: {},
  watch: {
    busId(val) {
      if (val) {
        this.getIndicationLevels()
      }
    },
    val(val) {
      this.keywords = val
      this.pName = val
    },
  },
  created() {
    if (this.busId) {
      this.getIndicationLevels()
    }
    this.keywords = this.val
  },
  mounted() {
    this.popoverWidth = this.$el.clientWidth
  },
  methods: {
    async getIndicationLevels() {
      const { code, data } = await getIndicationLevels(this.busId, this.indType)
      if (code === 0 && data && data.length) {
        this.levels = data.map(item => {
          return convertLevelData(item)
        })
      } else {
        this.levels = []
      }
    },
    onInputChange() {
      console.log('onInputChange>>>', this.keywords)
      this.$emit('changeValue', this.keywords)
      this.$emit('change')
      this.hidePopover()
    },
    onPnameChange() {
      this.keywords = this.pName
      this.popoverVisible = false
      this.onInputChange()
    },
    onExpandChange() {
      this.clearHideTimer()
    },
    onBonusChange() {
      this.$emit('bonus-change', this.selectedBonusVal)
    },
    showPopover(e) {
      // input clear 点击时，去掉该事件响应
      if (e && e.target.className.includes('el-input__clear')) {
        return
      }
      this.removeOutputListener()
      this.popoverVisible = this.levels.length > 0
      this.addOutputListener()
    },
    hidePopover() {
      this.clearHideTimer()
      this.removeOutputListener()
      this.hideTimer = setTimeout(() => {
        this.popoverVisible = false
      }, 200)
    },
    clearHideTimer() {
      if (this.hideTimer) {
        clearTimeout(this.hideTimer)
      }
    },
    addOutputListener() {
      setTimeout(() => {
        document.addEventListener('click', this.outputClickListener)
      }, 200)
    },
    removeOutputListener() {
      document.removeEventListener('click', this.outputClickListener)
    },
    outputClickListener() {
      if (this.popoverVisible) {
        this.hidePopover()
      }
    },
  },
  beforeDestroy() {
    this.clearHideTimer()
    this.removeOutputListener()
  },
}
</script>
<style lang="scss" scoped>
.ind-cascader-condition {
  display: flex;
  position: relative;
  ::v-deep .type-filter {
    .el-input__inner {
      padding-right: 20px;
      padding-left: 0;
      text-align: center;
    }
    .el-input__suffix {
      .el-input__icon {
        width: 20px;
      }
    }
  }
  .input-with-select {
    width: 100%;
  }
  .ind-cascader {
    flex: 1;
  }
  .popover-trigger {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
  }
}
</style>
